import Logo from '@/components/logo';
import { useSettings } from '@/store/settingStore';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ThemeLayout } from '@/types/enum';
import { HEADER_HEIGHT } from '../config';
import { SvgIcon } from '@/components/icon';
import { NavLink } from 'react-router-dom';

type Props = {
  collapsed: boolean;
  onToggle: () => void;
};
export default function NavLogo({ collapsed, onToggle }: Props) {
  const { themeLayout } = useSettings();

  return (
    <div
      style={{ height: `${HEADER_HEIGHT}px` }}
      className="relative flex items-center justify-center py-4"
    >
      <div className="flex items-center">
        {/* <Logo /> */}
        <NavLink to="/worklayouts">
          {themeLayout === ThemeLayout.Mini && <SvgIcon icon="ic-know-logo" size={36} />}

          {themeLayout !== ThemeLayout.Mini && <SvgIcon icon="ic-know-text-logo" size={180} />}
        </NavLink>
      </div>
      <div
        onClick={onToggle}
        onKeyDown={onToggle}
        className="border-border bg-bg-paper absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none items-center justify-center rounded-full border border-dashed text-center text-sm md:flex"
      >
        {collapsed ? (
          <RightOutlined className="text-text-disabled text-xs" />
        ) : (
          <LeftOutlined className="text-text-disabled text-xs" />
        )}
      </div>
    </div>
  );
}
